<template>
    <view class="pl-20 pr-20 pb-30">
        <view class="latest br-24">
            <view class="align-center pl-30 latest-title" @click="toList">
                <hj-image class="horn" src="horn-06.svg" width="42rpx" height="42rpx" />
                <text class="ft-32 ml-12">最新消息</text>
            </view>
            <view class="latest-in">
                <view class="swiper-main">
                    <swiper
                        class="swiper w100"
                        :display-multiple-items="4"
                        :vertical="true"
                        :autoplay="true"
                        :interval="4000"
                        :duration="600"
                        :circular="true"
                    >
                        <swiper-item v-for="item in list" :key="item.id">
                            <view
                                class="ft-24 c-p space-between align-center h100"
                                @click="toDetail(item)"
                            >
                                <view class="flex-auto pr-20 text">
                                    <text class="text-over-1">{{ item.title }}</text>
                                </view>
                                <view class="text">{{ item.time }}</view>
                            </view>
                        </swiper-item>
                    </swiper>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
/**
 * @description 消息列表组件
 * @author yinzhi
 * @date 2025-03-18
 */
import { onLoad } from '@dcloudio/uni-app'
import { ref, defineComponent } from 'vue'
defineComponent({
    name: 'NewsList'
})

const list = ref([])

onLoad(async () => {
    await getList()
})

const getList = () => {
    // 获取最新资讯列表
    list.value = [
        { id: 1, time: '2025-03-01', title: '快来报名，汇杰一千米第一期学院火热招募中' },
        { id: 2, time: '2025-03-01', title: '快来报名，汇杰一千米第一期学院火热招募中' },
        { id: 3, time: '2025-03-01', title: '快来报名，汇杰一千米第一期学院火热招募中' },
        { id: 4, time: '2025-03-01', title: '快来报名，汇杰一千米第一期学院火热招募中' },
        { id: 5, time: '2025-03-01', title: '快来报名，汇杰一千米第一期学院火热招募中' }
    ]
}
// 点击新闻操作
const toDetail = item => {
    uni.navigateTo({
        url: '/pages/message/message-details/index'
    })
}

// 跳转新闻详情
const toList = () => {
    uni.navigateTo({
        url: '/pages/message/message-list/index'
    })
}
</script>

<style scoped lang="scss">
.horn {
    animation: dh 1.5s infinite;
}
@keyframes dh {
    0% {
        transform: scale(1) rotate(10deg);
    }
    50% {
        transform: scale(1.1) rotate(-10deg);
    }
    100% {
        transform: scale(1) rotate(10deg);
    }
}
.latest {
    background: $uni-bg-color;
    &-title {
        height: 88rpx;
    }
    &-in {
        padding: 0 20rpx 20rpx;
        .swiper-main {
            background: #f8f8f8;
            border: 8rpx solid #ebebeb;
            padding: 10rpx 20rpx;
        }
    }
    .swiper {
        height: 240rpx;

        box-shadow: none;
    }
    .text {
        text-decoration: underline;
    }
}
</style>
